<template>
  <div class="total-box">
    <div class="total-count">
      <div class="left-total">
        <p class="title">{{ objData.allLeftTitle }}</p>
        <p class="amount">{{ objData.allAmountWater ? objData.allAmountWater : 0 | formatNum }}<span class="unit">{{ objData.unit }}</span></p>
      </div>
      <div class="line">&nbsp;</div>
      <div class="right-total">
        <p class="title">{{ objData.allRightTitle }}</p>
        <p class="amount">{{ objData.allAmountReceivable ? objData.allAmountReceivable:0 | formatNum }}<span class="unit">{{ objData.unit }}</span></p>
      </div>
    </div>
    <div class="total-count">
      <div class="left-total">
        <p class="title" v-html="objData.leftTitle"/>
        <p class="amount">{{ objData.amountWater ? objData.amountWater: 0 | formatNum }}<span class="unit">{{ objData.unit }}</span></p>
        <p class="ratio">
          <span>环增：</span>
          <span class="add">{{ orderContrasts.addAndSums }}</span>
          <span>{{ orderContrasts.orderContrast }}%</span>
        </p>
      </div>
      <div class="line">&nbsp;</div>
      <div class="right-total">
        <p class="title" v-html="objData.rightTitle"/>
        <p class="amount">{{ objData.amountReceivable ? objData.amountReceivable:0| formatNum }}<span class="unit">{{ objData.unit }}</span></p>
        <p class="ratio">
          <span>环增：</span>
          <span class="add">{{ receivedContrasts.addAndSumRecived }}</span>
          <span>{{ receivedContrasts.receivedContrast }}%</span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import common from '../../assets/js/common.js'
export default {
  filters: {
    formatNum (value) {
      return common.formatNum(value)
    }

  },
  props: {
    objData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      leftTitle: '',
      rightTitle: '',
      amountWater: '',
      amountReceivable: '',
      allAmountReceivable: '',
      allLeftTitle: '',
      allRightTitle: '',
      unit: '',
      orderContrast: '',
      receivedContrast: ''
    }
  },
  computed: {
    // 订单流水环比
    orderContrasts () {
      let addAndSums = ''
      let orderContrast = 0
      if (this.objData.orderPriorPeriod) {
        if (this.objData.orderPriorPeriod === 0) {
          orderContrast = 0
        } else {
          orderContrast = (this.objData.amountWater - this.objData.orderPriorPeriod) / this.objData.orderPriorPeriod
        }
      }
      if (orderContrast > 0 || orderContrast === 0) {
        addAndSums = '+'
      } else {
        addAndSums = '-'
        orderContrast = Math.abs(orderContrast)
      }
      orderContrast = (orderContrast * 100).toFixed(2)
      return {
        orderContrast,
        addAndSums
      }
    },
    receivedContrasts () {
      let receivedContrast = 0
      let addAndSumRecived = ''
      if (this.objData.receivedPriorPeriod) {
        if (this.objData.receivedPriorPeriod === 0) {
          receivedContrast = 0
        } else {
          receivedContrast = (this.objData.amountReceivable - this.objData.receivedPriorPeriod) / this.objData.receivedPriorPeriod
        }
        if (receivedContrast > 0 || receivedContrast === 0) {
          addAndSumRecived = '+'
        } else {
          addAndSumRecived = '-'
          receivedContrast = Math.abs(receivedContrast)
        }
        receivedContrast = (receivedContrast * 100).toFixed(2)
      }

      return {
        receivedContrast,
        addAndSumRecived

      }
    }

  },
  methods: {
    // changeTitle (receiveData) {
    //   this.allLeftTitle = receiveData.allLeftTitle
    //   this.allRightTitle = receiveData.allRightTitle
    //   this.leftTitle = receiveData.leftTitle
    //   this.rightTitle = receiveData.rightTitle
    //   this.unit = receiveData.unit
    //   // 总应收
    //   this.allAmountReceivable = common.formatNum(receiveData.allAmountReceivable)
    //   // 总流水金额
    //   this.allAmountWater = common.formatNum(receiveData.allAmountWater)
    //   // 按时间流水金额
    //   this.amountWater = common.formatNum(receiveData.amountWater)
    //   // 按时间总应收金额
    //   this.amountReceivable = common.formatNum(receiveData.amountReceivable)
    //   // 订单流水环比
    //   let orderContrast
    //   if (receiveData.orderPriorPeriod === 0) {
    //     orderContrast = 0
    //   } else {
    //     orderContrast = (receiveData.amountWater - receiveData.orderPriorPeriod) / receiveData.orderPriorPeriod
    //   }
    //   if (orderContrast > 0 || orderContrast === 0) {
    //     this.addAndSum = '+'
    //   } else {
    //     this.addAndSum = '-'
    //     orderContrast = Math.abs(orderContrast)
    //   }
    //   this.orderContrast = (orderContrast * 100).toFixed(2)
    //   // 应收环比
    //   let receivedContrast
    //   if (receiveData.receivedPriorPeriod === 0) {
    //     receivedContrast = 0
    //   } else {
    //     receivedContrast = (receiveData.amountReceivable - receiveData.receivedPriorPeriod) / receiveData.receivedPriorPeriod
    //   }

    //   if (receivedContrast > 0 || receivedContrast === 0) {
    //     this.addAndSumRecived = '+'
    //   } else {
    //     this.addAndSumRecived = '-'
    //     receivedContrast = Math.abs(receivedContrast)
    //   }
    //   this.receivedContrast = (receivedContrast * 100).toFixed(2)
    // }
  }
}
</script>
<style lang="scss" scoped>
.total-box{
  border: 0.02rem solid #79c4ee;
  background:rgba(47,60,134,1);

.total-count {
  display: -webkit-flex;
  display: flex;
  padding: 0.16rem;
  -webkit-justify-content: center;
  -webkit-align-items: center;
  border-bottom:1px dashed rgba(220,218,218,.5);
  &:last-of-type{
    border-bottom:0;
  }
  .line {
    width: 1px;
    background: rgba(220,218,218,.5);
    height: 0.6rem;
  }
  .left-total,
  .right-total {
    flex: 1;
    text-align: center;
    p {
      line-height: 170%;
      &.title {
        font-size: 0.28rem;
        color: #65c4ea;
      }
      &.amount {
        font-size: 0.32rem;
        color: #fff;
        font-weight: 600;
        .unit {
          color: #65c4ea;
          margin-left: .10rem;
          font-size: .24rem;
          font-weight: normal;
        }
      }
      &.ratio {
        font-size: 0.24rem;
        color: #65c4ea;
        .add {
          color: #ff9800;
        }
      }
    }
  }
}
}
</style>
